<template>
	<view class="shar_body">
		<!-- #ifdef H5 -->
		<image class="sharImage" src="../../static/jiujiu.png" mode="widthFix"></image>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<image class="sharImage" @longtap="saveImg" src="../../static/jiujiu.png" mode="widthFix"></image>
		<!-- #endif -->
		<view class="buttons">
			<view class="b_item">
				<image src="/static/shar-fangshi/weixin.png" mode=""></image>
				<view>微信</view>
			</view>
			<view class="b_item">
				<image src="/static/shar-fangshi/copy.png" mode=""></image>
				<view>复制链接</view>
			</view>
		</view>
		<view class="close">取消</view>
	</view>
</template>

<script>
	export default {
		name: "share_img",
		methods: {
			saveImg() {
				let that = this;
				uni.downloadFile({
					url: that.sharImageSrc,
					success: function(url) {
						uni.saveImageToPhotosAlbum({
							filePath: url.tempFilePath,
							success: function(e) {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none',
									duration: 2200
								});
							},
							fail() {
								that.$api.msg('保存失败请重试！');
							}
						});
					},
					fail(e) {
						that.$api.msg('保存失败请重试！');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.shar_body {
		background: rgba(0, 0, 0, 0.7);

		.sharImage {
			position: absolute;
			top: calc(50vh - 155px);
			transform: translateY(-25%);
			left: 15%;
			width: 70%;
		}

		.buttons {
			background-color: #fff;
			position: absolute;
			bottom: 90px;
			width: 100%;

			.b_item {
				display: inline-block;
				text-align: center;
				padding: 15px 0;
				width: 50%;

				image {
					height: 35px;
					width: 35px;
				}
			}
		}

		.close {
			background: #fff;
			border-top: 1px hsl(0, 0%, 87%) solid;
			position: absolute;
			bottom: 50px;
			font-size: 30upx;
			line-height: 40px;
			text-align: center;
			width: 100%;
		}
	}
</style>